<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息注册界面</title>
<script type="text/javascript">
    	function check_input()
    	{
    		var a = document.getElementById("username").value;
            var b = document.getElementById("password").value;
            var c = document.getElementById("newpassword").value;
    		var d = document.getElementById("phone").value;
    		var e = document.getElementById("email").value;
    		
    		var f = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; //用正则表达式判断账号格式
    		var g = /^(\w){6,20}$/;							 //用正则表达式判断密码格式
    		var h = /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;  //用正则表达式判断手机号码格式
    		var i = /^([0-9]|[a-z])+@([0-9]|[a-z])+(\.[c][o][m])$/i;   //用正则表达式判断邮箱账号格式
    		if(a=="")
    		{
    			document.getElementById("demo").innerHTML="账号不能为空";
    			flag = 1;
    			return false;
    		}
    		/*else if (!f.exec(a))
			{
				document.getElementById("demo").innerHTML="用户名只能输入5-20个以字母开头、可带数字、“_”、“.”的字串 ";
				flag = 1;
				return false;
			}
			else if(b=="")
			{
				document.getElementById("demo").innerHTML="密码不能为空";
				flag = 1;
    			return false;
			}
			else if(!g.exec(b)) 
			{
				document.getElementById("demo").innerHTML="只能输入6-20个字母、数字、下划线 ";
				flag = 1;
				return false;
			}
			else if(c=="")
			{
				document.getElementById("demo").innerHTML="确认密码不能为空";
				flag = 1;
				return false;
			}
			else if(c!=b)
			{
				document.getElementById("demo").innerHTML="密码不一致";
				flag = 1;
				return false;
			}
			else if(d=="")
			{
				document.getElementById("demo").innerHTML="手机号不能为空";
				flag = 1;
				return false;
			}
			else if(!h.exec(d)) 
   			{
   				document.getElementById("demo").innerHTML="手机号码必须以数字开头，除数字外，可含有“-” "
   				flag = 1;
   				return false
   			}
			else if(e=="")
			{
				document.getElementById("demo").innerHTML="邮箱地址不能为空";
				flag = 1;
				return false;
			}
			else if(!i.exec(i))
   			{
      			document.getElementById(id.name).innerHTML="输入的邮箱格式有误";
      			flag = 1;
      			return false;
   			}*/
   			else {
   				register.submit();
   			}
    	}
    	
    </script>

<style type="text/css">
.basic-grey {
	margin-left: auto;
	margin-right: auto;
	max-width: 500px;
	background: #F7F7F7;
	padding: 25px 15px 25px 10px;
	font: 12px Georgia, "Times New Roman", Times, serif;
	color: #888;
	text-shadow: 1px 1px 1px #FFF;
	border: 1px solid #E4E4E4;
}

.basic-grey h1 {
	font-size: 25px;
	padding: 0px 0px 10px 40px;
	display: block;
	border-bottom: 1px solid #E4E4E4;
	margin: -10px -15px 30px -10px;;
	color: #888;
}

.basic-grey h1>span {
	display: block;
	font-size: 11px;
}

.basic-grey label {
	display: block;
	margin: 0px;
}

.basic-grey label>span {
	float: left;
	width: 20%;
	text-align: right;
	padding-right: 10px;
	margin-top: 10px;
	color: #888;
}

.basic-grey div>span {
	float: left;
	width: 10%;
	text-align: right;
	padding-right: 10px;
	margin-top: 10px;
	color: #888;
}

.basic-grey input[type="text"], .basic-grey input[type="password"],
	.basic-grey textarea, .basic-grey select {
	border: 1px solid #DADADA;
	color: #888;
	height: 30px;
	margin-bottom: 16px;
	margin-right: 6px;
	margin-top: 2px;
	outline: 0 none;
	padding: 3px 3px 3px 5px;
	width: 70%;
	font-size: 12px;
	line-height: 15px;
	box-shadow: inset 0px 1px 4px #ECECEC;
	-moz-box-shadow: inset 0px 1px 4px #ECECEC;
	-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}

.basic-grey textarea {
	padding: 5px 3px 3px 5px;
}

.basic-grey select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
	width: 70%;
	height: 35px;
	line-height: 25px;
}

.basic-grey textarea {
	height: 100px;
}

.basic-grey .button {
	background: #E27575;
	border: none;
	padding: 10px 25px 10px 25px;
	color: #FFF;
	box-shadow: 1px 1px 5px #B6B6B6;
	border-radius: 3px;
	text-shadow: 1px 1px 1px #9E3F3F;
	cursor: pointer;
}

.basic-grey .reset {
	background: #B6B6B6;
	border: none;
	padding: 10px 25px 10px 25px;
	color: #FFF;
	box-shadow: 1px 1px 5px #B6B6B6;
	border-radius: 3px;
	text-shadow: 1px 1px 1px #9E3F3F;
	cursor: pointer;
}

.basic-grey .button:hover {
	background: #CF7A7A;
}

#demo {
	color: red;
}
</style>
</head>
<body>

	<form action="../Register" method="post" class="basic-grey"
		name="register">
		<h1>
			注册 <span>开始你的学习生活！</span>
		</h1>
		<text id=demo></text>
		<label> <span>用&nbsp;&nbsp;户&nbsp;&nbsp;名:</span> <input
			id="username" type="text" name="username" placeholder="Your username" />
		</label> <label> <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
			<input id="password" type="password" name="password"
			placeholder="Valid password" />
		</label> <label> <span>确认密码:</span> <input id="newpassword"
			type="password" name="newpassword" placeholder="Valid password" />
		</label> <label> <span>手&nbsp;&nbsp;机&nbsp;&nbsp;号:</span> <input
			id="phone" type="text" name="phone"
			placeholder="Valid your phone number" />
		</label> <label> <span>邮箱地址:</span> <input id="email" type="text"
			name="email" placeholder="as 123@google.com" />
		</label> <label>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			性别:
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			男:<input type="radio" name="sex" value="man" />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			女:<input type="radio" name="sex" value="woman" /><br>
		<br>
		</label> <label> <span>用户类型:</span><select name="userkind">
				<option value="student">学生</option>
				<option value="admin">管理员</option>
		</select>
		</label>
		<div>
			<span>&nbsp;</span> <input type="button" class="button"
				onclick="check_input()" value="注册" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>&nbsp;</span> <input type="button" class="reset" value="取消"
				onclick="window.location.href='../index.html'" />
		</div>
	</form>

</body>
</html>